<template>
	<view>
		<!-- 设计师品牌馆选项卡 -->
		<view class="tab_list">
			<view v-for="(item,index) in tab_list" :key ='index'  :class="{items:true,items_active:tab_index==index}"  @click="tabs1(index)">{{item}}</view>
			
		</view>
		<view v-if="tab_index == 0">
			<!-- 设计师选项卡的内容 -->
			<view class="design_list">
				<view v-for="(item,index) in design_list" :key='index' :class="{design_item:true,design_item_actived:desing_index==index}" @click="tabs2(index)">{{item}}</view>
				
			</view>
		</view>
		<view v-if="tab_index == 1">
			<view class="design_list">
				<view v-for="(item,index) in branfd_list" :key='index' :class="{design_item:true,design_item_actived:branfd_index==index}" @click="tabs3(index)">{{item}}</view>
				
			</view>
		</view>
		<view v-if="tab_index == 0">
			<!-- 美发师 -->
			<view v-if="desing_index==0">
				<!-- 设计师美发师 -->
				<hairdressing></hairdressing>
			</view>
			<view v-if="desing_index==1">美容师</view>
			<view v-if="desing_index==2">化妆师</view>
			<view v-if="desing_index==3">美甲师</view>
			<view v-if="desing_index==4">美体师</view>
		</view>
		
		<view v-if="tab_index == 1">
			<!-- 品牌管 -->
			<view v-if="branfd_index==0">
				<!-- 品牌管美发 -->
				<branfdHaird></branfdHaird>
			</view>
			<view v-if="branfd_index==1">美容</view>
			<view v-if="branfd_index==2">化妆</view>
			<view v-if="branfd_index==3">美甲</view>
			<view v-if="branfd_index==4">美体</view>
		</view>
		
	</view>
</template>

<script>
	import hairdressing from './hairdressing.vue'
	import branfdHaird from './branfd_haird.vue'
	export default{
		data(){
			return{
				tab_list:['设计师','品牌馆'],
				tab_index:0,
				design_list:['美发师','美容师','化妆师','美甲师','美体师'],
				desing_index:0,
				branfd_index:0,
				branfd_list:['美发','美容','化妆','美甲','美体'],
				
			}
		},
		components:{
			hairdressing,
			branfdHaird
		},
		methods:{
			//第一个选项卡的切换
			tabs1(index){
				this.tab_index = index
			},
			tabs2(index){
				this.desing_index = index
			},
			tabs3(index){
				this.branfd_index = index
			}
		}
	}
</script>

<style scoped lang="less">
	//设计师品牌馆选项卡
	.tab_list{
		padding: 34rpx 42rpx;
		border-bottom: 1rpx solid #EDEDED;
		display: flex;
		padding-bottom: 0rpx;
		background: white;
		.items_active{
			border-bottom: 4rpx solid #00C6C2;	
			font-weight:bold!important;
			color: #00C6C2!important;
			}
		.items{
			height: 60rpx;
			margin-right: 192rpx;
			font-size: 32rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #8A8A8A;
		}
	}
	//设计师选项卡的内容
	.design_list{
		background: white;
		display: flex;
		justify-content: space-between;
		padding: 38rpx 42rpx;
		.design_item{
			
			font-size: 28rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #8A8A8A;
		}
		.design_item_actived{
			
			font-weight: bold!important;
			color: #000000!important;
		}
	}
</style>
<style>
	page{
		
		background: #EDEDED;
	}
</style>
